<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>htmlcss 阶段</title>
    <style>
        .test-box {
            width: 1000px;
            margin: 0 auto;
        }

        .test-box-list li span {
            display: inline-block;
            padding: 5px 8px;
            margin: 0 0 0 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        .test-box-list li span.active {
            background-color: green;
            color: #fff;
        }
    </style>
</head>

<body>

    <div class="test-box">
        <h3>选择题</h3>
        <ul class="test-box-list">
            <li>
                <p>1. 以下命名不符合规范的是?</p>
                <div> 
                    <span data-answer="A" data-index="0" class="opt">A. 1box </span> 
                    <span data-answer="B" data-index="0" class="opt">B. _box</span> 
                    <span data-answer="C" data-index="0" class="opt">C. $box</span> 
                    <span data-answer="D" data-index="0" class="opt">D. box1</span> </div>
            </li>
            <li>
                <p>2. 以下谁是引用数据类型?</p>
                <div> 
                    <span data-answer="A" data-index="1" class="opt">A. var str = 'hello'</span> 
                    <span data-answer="B" data-index="1" class="opt">B. var num = 101</span> 
                    <span data-answer="C" data-index="1" class="opt">C. var arr = []</span> 
                    <span data-answer="D" data-index="1" class="opt">D. var isPc= true</span> 
                </div>
            </li>
            <li>
                <p>3. 以下哪个是IE浏览器的内核?</p>
                <div> 
                    <span data-answer="A" data-index="2" class="opt">A. trident内核</span> 
                    <span data-answer="B" data-index="2" class="opt">B. gecko内核</span> 
                    <span data-answer="C" data-index="2" class="opt">C.Blink内核 </span> 
                    <span data-answer="D" data-index="2" class="opt">D.webkit内核</span> 
                </div>
            </li>
            
        </ul>
    </div>


    <script>
        // 要求：
            // 同一选择题，点击当前的选项，设置其背景高亮，非当前点击选项移除高亮
            // 根据自定义属性值，把点击选中的答案，有序添加到数组中 ，例如： ["A","C","D"]

                var ul = document.querySelector("ul");
                ul.onclick = function(event) {
                    var ele = event.target;
                    console.log(ele);
                    // console.log(ele.length);
                    // console.log(event);
                        ele.classList.toggle("active");   
                }
    </script>
</body>

</html>